<template>  
  <div class="container">  
    <div class="app">  
      {{ msg }}  
    </div>  
    <button @click="incrementCount" class="btn">  
      你点击了加一按钮，当前数值：{{ count }}  
    </button>  
    <button @click="divideCount" class="btn">  
      你点击了除以2按钮，当前数值：{{ count }}  
    </button>  
    <input v-model.number="val" placeholder="请输入数值（用于加法）" style="margin: 10px 0" />  
    <button @click="addValue" class="btn">  
      你点击了添加输入框数值按钮，当前数值：{{ count }}  
    </button>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { ref, reactive, computed } from 'vue';  
  
// 模拟store  
const store = reactive({  
  count: 0,  
  increment() {  
    this.count++;  
  },  
  incrementValue(value: number) {  
    this.count += value;  
  },  
  divideByTwo() {  
    if (this.count > 0) {  
      this.count = Math.floor(this.count / 2);  
    }  
  }  
});  
  
const val = ref(0);  
const count = computed(() => store.count);  
const msg = ref('hello Vue3');  
  
function incrementCount() {  
  store.increment();  
}  
  
function divideCount() {  
  store.divideByTwo();  
}  
  
function addValue() {  
  store.incrementValue(val.value);  
}  
</script>  
  
<style scoped lang="less">  
.container {  
  width: 80%;  
  margin: 0 auto;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  .app {  
    width: 100px;  
    height: 100px;  
    margin-bottom: 20px; // 添加一些底部边距以便看到输入框和按钮  
  }  
  .btn {  
    background-color: #9c34ba;  
    color: #fff;  
    border: none;  
    padding: 10px 20px;  
    border-radius: 5px;  
    margin-bottom: 10px; // 添加一些底部边距以分隔按钮  
    &:hover {  
      background-color: #be84ce;  
      cursor: pointer;  
    }  
  }  
}  
</style>